<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-07-02 00:09:28
 * @LastEditTime: 2024-07-02 23:32:58
 * @Description: 订单详情
-->
<template>
  <div class="order-detail-page">
    <div class="order-header">
      <div class="order-title">
        <i class="iconfont icon-gantanhao1"></i>
        订单状态：{{ schedule_statusFormate(orderData) }}
      </div>
      <!-- <div class="tips">请您在2024-05-01 23:59:59内完成支付，否则订单会被自动取消</div> -->
      <div class="tips">订单创建时间：{{ orderData.create_datetime }}</div>
      <div class="right-div" v-if="orderData.schedule_status === 1000">
        <div class="total_price">应付金额：<span class="price">￥100</span></div>
        <div class="btn-box">
          <el-button size="small" @click="cacelFun()">取消</el-button>
          <el-button type="primary" size="small" @click="runTo('/account-info/order-pay')">立即支付</el-button>
        </div>
      </div>
    </div>
    <div class="order-table">
      <BaseTable :columns="column" :table-data="[orderData]">
        <template #source_type="{ row }">
          {{ column[2].formatter(row.source_type) }}
        </template>
        <template #total_price="{ row }">
          ￥{{ row.total_price }}
        </template>
      </BaseTable>
      <div class="total-div">
        <div class="val">合计：￥{{ orderData.total_price }}</div>
        <!--  <div class="val">优惠：-￥0.00</div> -->
      </div>
    </div>
    <div class="need-pay-box">应付金额：￥{{ orderData.total_price }}</div>
  </div>
</template>

<script>
import BaseTable from '@/components/bmp/table/index.vue'
import { oderDetailApi, orderCloseApi } from '@/api/order'
export default {
  components: {
    BaseTable
  },

  data() {
    return {
      orderData: {
        "id": 1424,
        "users_uniqueid": "n6mbo00lqb0d0djwg4dx5bnuc3npmgqr",
        "order_no": "24051614445232750000000000010922",//订单号 32位
        "total_price": "1.00",//总额(分)
        "pay_result_data": {},
        "schedule_status": 1000,//订单状态:1000=已下单,2000=已支付(前端回调),4000=已完成
        "mode_type": 0,//订单支付方式 参照发起支付入参
        "source_type": 10300,//订单类型 订单类型:10000=余额,10300=视频生成时长,10400=流量,10500=磁盘空间
        "payload": "10",//载荷
        "closed_switch": 0,//取消:0=否,1=是
        "create_datetime": "2024-05-16 14:44:52",
        "update_datetime": "2024-05-16 14:44:52"
      },
      column: [
        {
          prop: 'order_no',
          label: '订单号'
        },
        {
          prop: 'create_datetime',
          label: '创建时间'
        },
        {
          prop: 'source_type',
          label: '所属类型',
          formatter: function (data) {
            if (data == 10300) {
              return '视频渲染时长'
            } else if (data == 10400) {
              return '流量'
            } else if (data == 10500) {
              return '磁盘空间'
            } else if (data == 10000) {
              return '余额'
            } else {
              return '--'
            }
          }
        },
        {
          prop: 'total_price',
          label: '金额'
        }
      ],
    }
  },
  created() {
    this.getOrderData()
  },
  methods: {
    getOrderData() {
      const id = this.$route.query.orderId
      const data = {
        order_no: id
      }
      oderDetailApi(data).then((res) => {
        this.orderData = res.data
      })
    },
    cacelFun() {
      this.$confirm('是否确认取消该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          order_no: this.orderData.order_no
        }
        orderCloseApi(data).then(() => {
          this.router.go(-1)
        }).catch(() => {
          this.$message({
            message: '取消失败，请重试！',
            type: 'warning'
          });
        })
      }).catch(() => {

      });

    },
    schedule_statusFormate(data) {
      if (data.closed_switch == 1) {
        return '已取消'
      } else {
        if (data.schedule_status == 1000) {
          return '待支付'
        } else if (data.schedule_status == 2000 || data.schedule_status == 4000) {
          return '支付成功'
        } else {
          return '--'
        }
      }
    },
    runTo(url) {
      this.$router.push({ path: url, query: { orderId: this.orderData.order_no } })
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail-page {
  width: 100%;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  background: #fff;

  .order-header {
    width: 100%;
    position: relative;
    padding-bottom: 5px;

    .order-title {
      font-weight: 600;
      font-size: 20px;
      color: #1C1F23;
      line-height: 26px;

      .iconfont {
        color: #39D5BA;
        font-size: 16px;
        margin-right: 2px;
      }
    }

    .tips {
      font-weight: 400;
      font-size: 12px;
      color: #9E9E9E;
      padding-left: 22px;
      line-height: 26px;
    }

    .right-div {
      position: absolute;
      right: 10px;
      top: 0;

      .total_price {
        line-height: 26px;
        font-size: 14px;
        color: #FF3F40;

        .price {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .btn-box {}
    }
  }

  .order-table {
    width: 100%;
    height: auto;
    padding: 10px 20px;
    border-top: 1px solid #E0E0E0;
    margin: 10px 0;
    position: relative;

    .total-div {
      width: 25%;
      height: 40px;
      margin-left: 75%;
      padding: 15px 5px;
      font-weight: 400;
      font-size: 12px;
      color: #1C1F23;
      line-height: 22px;
      text-align: left;
    }
  }

  .need-pay-box {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: #F4F5F9;
    padding-left: 75%;
  }
}
</style>
